<template>
    <div class="form-container">
      <!-- 状态描述信息 -->
      <div class="status-message">
        <el-icon class="status-icon" :size="50" style="color: #ff4d4f;">
          <circle-close />
        </el-icon>
        <h3 class="status-title">认定被驳回</h3>
        <p class="status-description">需要重新上传材料</p>
      </div>
  
      <!-- 竞赛全称输入框 -->
      <el-form class="form" ref="form" label-width="70px">
        <el-form-item label="获奖全称">
          <el-input
            v-model="competitionName"
            placeholder="请输入获奖全称"
            class="competition-name-input"
            :maxlength="50"
          />
        </el-form-item>
      </el-form>

      <div>
          <el-form-item label="获奖时间">
            <el-date-picker
              v-model="awardDate"
              placeholder="请选择日期和时间" 
              type="datetime"
              style="width: 100%;" 
              format="YYYY/MM/DD HH:mm:ss"
              @change="handleAwardDateChange"
            />
          </el-form-item>
        </div>
  
      <!-- 文件上传部分 -->
      <el-upload
        ref="upload"
        class="upload-demo"
        action="#"
        :limit="1"
        :file-list="fileList"
        :auto-upload="false"
        :on-exceed="handleExceed"
        :on-remove="handleRemove"
        :on-change="handleFileChange"
        :on-preview="handlePreview"
      >
        <template #trigger>
          <el-button type="primary">点击上传材料</el-button>
        </template>
      </el-upload>
      <el-dialog
            title="文件预览"
            v-model="previewVisible"
            width="80%"
            top="5vh"
            :fullscreen="false" 
            class="preview-dialog"
          >
            <template #default>
              <div v-if="previewPath.endsWith('.pdf')" class="pdf-container">
                <iframe
                  :src="previewPath"
                  alt="PDF 预览"
                  class="pdf-preview"
                  frameborder="0"
                />
              </div>
              <div v-else>
                <img :src="previewPath" alt="图片预览" class="image-preview" />
              </div>
            </template>
  </el-dialog>
  
      <!-- 提交按钮 -->
      <el-button type="success" @click="submit" class="submit-btn">重新提交</el-button>
    </div>
  </template>
  
  <script>
  import { CircleClose } from '@element-plus/icons-vue'; // 引入失败图标
  import { uploadFile } from "@/api/competition/index.js"; // 导入接口
  import { convertISOToBasicString } from "@/utils/common1.js";
  export default {
    props: {
    // 接收父组件传来的竞赛申请数据
    application: Object
  },
    components: {
      CircleClose,
    },
    data() {
      return {
        fileList: [], // 用来存储文件列表
        competitionName: "", // 用来存储竞赛全名
        awardDate: "",
        previewVisible: false,//控制图片预览窗口的显示与隐藏
        previewPath: ""//预览文件路径
      };
    },
    methods: {
      handleAwardDateChange(newDate) {
      this.awardDate = convertISOToBasicString(newDate);
    },

      updatePreviewPath() {
        if (this.fileList.length > 0) {
          const file = this.fileList[0];

          // 如果文件是图片，且具有 raw 数据，通过 FileReader 读取
          if (file.raw) {
            const fileExtension = file.name.toLowerCase().slice(file.name.lastIndexOf('.'));
            const validImageTypes = ['.jpg', '.jpeg', '.png', '.gif'];
            
            // 判断是否是有效的图片
            if (validImageTypes.includes(fileExtension) ) {
              console.log("当前文件无 URL，正在用 FileReader 读取文件...");
              const reader = new FileReader();
              reader.onload = (e) => {
                this.previewPath = e.target.result; // 使用 FileReader 读取文件内容
              };
              reader.readAsDataURL(file.raw); // 读取为数据URL，适用于图像
            } else {
              console.log("该文件无法预览：", file.name);
              this.previewPath = ''; // 如果不是图片，清空预览路径
            }
          } else {
            console.log("该文件无法预览，缺少有效数据：", file.name);
            this.previewPath = ''; // 如果没有 URL 或 raw 数据，清空预览路径
          }
        } else {
          this.previewPath = ''; // 清空预览路径
        }
},

      handlePreview(file) {
      if(this.previewPath == ""){
        this.$message.error("不支持在线查看该文件")
        return;
      }
      this.previewVisible = true;
    },
      // 文件变化时处理
      handleFileChange(file, fileList) {
        console.log("文件变化了")
        if (!file || !file.name) {
            console.log("无效文件，跳过");
            return; // 如果文件无效，直接跳过
          }

          // 使用文件扩展名来判断文件类型
          const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
          const fileExtension = file.name.toLowerCase().slice(file.name.lastIndexOf('.')); // 获取文件扩展名

          console.log("文件扩展名：", fileExtension); // 输出文件扩展名，确认是否正确

          if (!validExtensions.includes(fileExtension)) {
            this.$message.error('只能上传图片或PDF文件');
            // 如果文件不符合要求，在这里清除文件列表
            this.fileList = fileList.filter(f => {
            const fileExtension = f.name.toLowerCase().slice(f.name.lastIndexOf('.'));
            const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
            return validExtensions.includes(fileExtension);
          });
          return;
          }        
      this.fileList = fileList.map((f) => {
        // 如果 raw 属性丢失，手动补充
        if (!f.raw) {
          f.raw = f.originFileObj || f; // originFileObj 是 el-upload 中上传的原始文件对象
        }
        return f;
      });
},

    // 文件数量超出时的处理
    handleExceed(files) {

      const file = files[0];
      // 检查 file 和 file.type 是否有效
      if (!file ) {
        this.$message.error('文件无效');
        return false; // 如果没有文件名，直接返回 false
      }

          // 使用文件扩展名来判断文件类型
          const validExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.pdf'];
          const fileExtension = file.name.toLowerCase().slice(file.name.lastIndexOf('.')); // 获取文件扩展名

          console.log("文件扩展名：", fileExtension); // 输出文件扩展名，确认是否正确

          if (!validExtensions.includes(fileExtension)) {
            this.$message.error('只能上传图片或PDF文件');
            return;
          }      
      console.log("文件超出了")
      this.$refs.upload.clearFiles(); // 清空当前文件
      file.uid = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; // 生成唯一 ID
      file.raw = file.originFileObj || file; // 确保 raw 属性存在
      this.fileList = [file]; // 更新为仅包含一个文件
},

      // 文件删除时处理
      handleRemove(file, fileList) {
        // 清空文件列表后再更新
        console.log("文件被删除:", file);
        this.fileList = []; // 确保清空文件列表
        console.log("更新后的文件列表:", this.fileList);
        this.$message.success("文件已删除");
      },
  
      // 生成文件唯一ID（模拟）
      genFileId() {
        return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
      },
  
      // 提交逻辑
      async submit() {
        if (!this.competitionName) {
          this.$message.error("请填写获奖全称");
          return;
        }
        if(!this.awardDate){
          this.$message.error("请选择获奖时间");
          return;
        }
        if (this.fileList.length === 0) {
          this.$message.error("请上传材料");
          return;
        }


        // 这里可以执行提交的相关逻辑，打印提交的文件信息
        console.log('修改后的数据:', {
        applicationId: this.application.id,
        competitionName: this.competitionName,
        fileList: this.fileList,
        awardDate: this.awardDate,
        });
        try {
          let data = await uploadFile(this.application.id, this.fileList[0].raw, this.competitionName, this.awardDate);
          if (!data.code) {
            this.$message.success('提交成功');
            this.$emit("hanleQeury");
          } else {
            this.$message.error('提交失败，请重试');
          }
        } catch (error) {
          console.error('提交失败:', error);
          this.$message.error('提交失败，请检查网络或稍后再试！');
        }

        // 通知父组件关闭 dialog
        this.$emit('closeDialog');
      },
    },
    watch: {
      fileList: {
        deep: true,
        handler() {
          this.updatePreviewPath();
        },
      },
    },
  };
  </script>
  
  <style scoped>
  .form-container {
    padding: 20px;
  }
  
  .status-message {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .status-icon {
    color: #ff4d4f;
  }
  
  .status-title {
    color: #ff4d4f;
    font-size: 20px;
    margin-top: 10px;
  }
  
  .status-description {
    color: #ff4d4f;
    font-size: 14px;
    margin-top: 5px;
  }
  
  .form {
    margin-bottom: 20px;
  }
  
  .competition-name-input {
    width: 100%;
  }
  
  .file-display {
    margin-top: 20px;
    display: flex;
    align-items: center;
  }
  
  .file-name {
    margin-left: 10px;
    font-size: 14px;
    color: #333;
  }
  
  .el-button {
    margin-top: 20px;
    width: 100%;
  }
  
  .submit-btn {
    margin-top: 20px;
    width: 100%;
  }
  
  /* 调整上传按钮 */
  .upload-demo {
    margin-top: 20px;
  }
  
  .upload-btn {
    margin-top: 20px;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  </style>
  